<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <style>
            /*   
              font-face可以将服务器中的字体直接提供给用户去使用 
                问题:
                  1.加载速度(属于静态资源,会比较慢)
                  2.版权
            */
            @font-face {
                /* 指定字体的名字 */
                font-family: 'myfont';
                /* 服务器中字体的路径 format("truetype")确保浏览器正常识别, 一般不加也没事*/
                src: url('./font/ZCOOLXiaoWei-Regular.ttf') format("truetype");
            }

            p {
                /* 
                字体相关的样式 
                  color用来设置字体颜色
                  font-size 字体的大小
                    和font-size相关的单位
                    em 相当于当前元素的font-size
                    rem 相当于根元素的一个font-size
                
                  font-family(字体族, 字体的格式)
                      可选值:
                        serif                  衬线字体
                        sansserif              非衬线字体
                        monospace              等宽字体
                            - 指定字体的类别,浏览器会自动使用该类别下的字体

                      - font-family 可以同时指定多个字体,多个字体间使用,隔开
                          字体生效时优先使用第一个,第一个无法使用则使用第二个,依次类推

                */
                color: red;
                font-size: 40px;

                /* font-family: '华文彩云'; */
                /* font-family: 'Courier New', Courier, monospace; */
                font-family: myfont;
            }
        </style>
        <title>Document</title>
    </head>
    <body>
        <p>今天天气真不错,Hello,Hello,How are you!</p>
    </body>
</html>
